<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>个人中心 - 二手好房</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template -->
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/css/clean-blog.min.css" rel="stylesheet">
    <style>
        .user-info {
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            margin-top: 50px;
        }
        .user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            margin: 0 auto 20px;
        }
        .info-item {
            margin: 15px 0;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .info-label {
            font-weight: bold;
            color: #2c3e50;
        }
        .info-value {
            color: #7f8c8d;
        }
        .house-section {
            background: #fff;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.06);
            margin-top: 30px;
        }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .house-card {
            border: 1px solid #ecf0f1;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .house-thumb {
            width: 110px;
            height: 75px;
            border-radius: 6px;
            overflow: hidden;
            flex-shrink: 0;
            background: #f5f6fa;
        }
        .house-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .house-body {
            flex: 1;
        }
        .house-card h5 {
            margin-bottom: 5px;
            color: #2c3e50;
        }
        .house-meta {
            color: #7f8c8d;
            font-size: 14px;
        }
        .house-actions {
            text-align: right;
        }
        .house-actions .btn {
            margin-left: 10px;
        }
    </style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand" href="/">二手好房</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">首页</a>
                </li>
                <li class="nav-item">
                    <div class="dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            欢迎，{{ session.get('username') }}
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="/user">个人中心</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/logout">退出登录</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Page Header -->
<header class="masthead" style="background-image: url('/static/img/home-bg.jpg'); height: 200px;">
    <div class="overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <div class="site-heading">
                    <h1>个人中心</h1>
                    <span class="subheading">管理您的账户信息</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            <div class="user-info">
                <div class="user-avatar">
                    <i class="fa fa-user"></i>
                </div>
                <h3 class="text-center" style="color: #2c3e50;">{{ session.get('username') }}</h3>
                
                <div class="info-item">
                    <span class="info-label">用户名：</span>
                    <span class="info-value">{{ session.get('username') }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">用户ID：</span>
                    <span class="info-value">{{ session.get('user_id') }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">注册时间：</span>
                    <span class="info-value">{{ registration_time }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">上次登录：</span>
                    <span class="info-value">{{ last_login }}</span>
                </div>
                
                <div class="text-center" style="margin-top: 30px;">
                    <a href="/user/edit" class="btn btn-primary mr-3">编辑信息</a>
                    <a href="/" class="btn btn-outline-secondary mr-3">返回首页</a>
                    <a href="/logout" class="btn btn-outline-secondary">退出登录</a>
                </div>
            </div>

            <div class="house-section">
                <div class="section-header">
                    <div>
                        <h4>我的收藏</h4>
                        <small class="text-muted">共 {{ collected_houses|length }} 套</small>
                    </div>
                </div>
                {% if collected_houses %}
                    {% for house in collected_houses %}
                    <div class="house-card">
                        <div class="house-thumb">
                            <img src="{{ url_for('static', filename='img/house-bg1.jpg') }}" alt="{{ house.title }}">
                        </div>
                        <div class="house-body">
                            <h5>{{ house.title }}</h5>
                            <div class="house-meta">
                                {{ house.address or '地址未知' }} |
                                {{ house.rooms or '户型未知' }} |
                                发布于 {{ house.publish_date }}
                            </div>
                            <div class="house-meta">
                                价格：{{ house.price or '暂无' }} · 浏览：{{ house.page_views or 0 }}
                            </div>
                        </div>
                        <div class="house-actions">
                            <a class="btn btn-sm btn-outline-primary" href="/house/{{ house.id }}">查看房源</a>
                            <button class="btn btn-sm btn-outline-danger btn-uncollect" data-house-id="{{ house.id }}">取消收藏</button>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted mb-0">暂无收藏房源，去逛逛吧！</p>
                {% endif %}
            </div>

            <div class="house-section">
                <div class="section-header">
                    <div>
                        <h4>最近浏览</h4>
                        <small class="text-muted">最多保留 12 条最新记录</small>
                    </div>
                    {% if seen_houses %}
                    <button class="btn btn-sm btn-outline-secondary" id="clear-seen-btn">清空浏览记录</button>
                    {% endif %}
                </div>
                {% if seen_houses %}
                    {% for house in seen_houses %}
                    <div class="house-card">
                        <div class="house-thumb">
                            <img src="{{ url_for('static', filename='img/house-bg1.jpg') }}" alt="{{ house.title }}">
                        </div>
                        <div class="house-body">
                            <h5>{{ house.title }}</h5>
                            <div class="house-meta">
                                {{ house.address or '地址未知' }} |
                                {{ house.rooms or '户型未知' }} |
                                发布于 {{ house.publish_date }}
                            </div>
                        </div>
                        <div class="house-actions">
                            <a class="btn btn-sm btn-outline-primary" href="/house/{{ house.id }}">再次查看</a>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted mb-0">暂无浏览记录。</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <p class="copyright text-muted">Copyright &copy; 二手好房 2019</p>
            </div>
        </div>
    </div>
</footer>

<!-- Bootstrap core JavaScript -->
<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="/static/js/clean-blog.min.js"></script>

<!-- 会话超时管理 -->
<script src="/static/js/session-timeout.js"></script>
<script>
    function toggleCollect(houseId, button) {
        fetch('/api/toggle_collect', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({house_id: houseId})
        }).then(response => response.json())
          .then(data => {
              if (data.success) {
                  window.location.reload();
              } else {
                  alert(data.error || '操作失败');
              }
          }).catch(() => alert('网络错误，请稍后重试'));
    }

    document.querySelectorAll('.btn-uncollect').forEach(btn => {
        btn.addEventListener('click', () => {
            toggleCollect(btn.dataset.houseId, btn);
        });
    });

    const clearSeenBtn = document.getElementById('clear-seen-btn');
    if (clearSeenBtn) {
        clearSeenBtn.addEventListener('click', () => {
            if (!confirm('确定要清空浏览记录吗？')) {
                return;
            }
            fetch('/api/clear_seen', {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            }).then(resp => resp.json())
              .then(data => {
                  if (data.success) {
                      window.location.reload();
                  } else {
                      alert(data.error || '操作失败');
                  }
              }).catch(() => alert('网络错误，请稍后重试'));
        });
    }
</script>
</body>
</html>
